<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-29 17:31:10
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-16 11:26:47
 * @FilePath: \B2B\ebuy\src\views\Main\Supplier\product\CustomerComment\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
    <div class="customerComment">
        <el-card class="comment-list">
            <div slot="header" class="header">
                产品评价 
                <el-rate v-model="avgStar" disabled show-score></el-rate>
                好评率{{positiveRatio}}%
            </div>
            <el-card class="one-comment" v-for="comment,id in comments" :key="id">
                <div slot="header" class="one-comment-header">
                    <div class="pre">
                        {{comment.account}}
                        <el-rate v-model="comment.star" disabled></el-rate>
                    </div>
                    <div class="tips">
                        {{specificationList[comment.product_specification_id].price}}元/
                        {{specificationList[comment.product_specification_id].name}} | 
                        {{comment.comment_time}}
                    </div>
                </div>
                <div class="content">
                    <span class="text">{{comment.content}}</span>
                    <div class="images">
                        <img v-lazy="url" alt="" v-for="url,id in comment.pic_list" :key="id">
                    </div>
                </div>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import Comment from './Comment'
import Paging from '../Paging.vue'
export default {
    name: 'CustomerComment',
    components: {
        Comment,
        Paging
    },
    data() {
        return {
            
            comments:[],
            specificationList:{},
        }
    },
    computed:{
        avgStar() {
            if (this.comments.length > 0) {
                let sum = 0
                for (let obj of this.comments) sum += obj.star
                return sum / this.comments.length
            }
            return 5
        },
        positiveRatio() {
            if (this.comments.length > 0) {
                let sum = 0
                for (let obj of this.comments) sum += obj.star > 3 ? 1 : 0
                return sum * 100 / this.comments.length
            }
            return 100
        }
    },
    methods: {
        async load() {
            await this.$API.getSpecification().then(res => {
                if (res.status == 200) {
                    let pid = this.$store.state.supplier.product_id
                    for (let obj of res.data) {
                        if (obj.product_id == pid) this.specificationList[obj.id] = obj
                    }
                    return this.$API.getProductComment()
                }
            }).then(res => {
                if (res.status == 200) {
                    for (let obj of res.data) {
                        for (let i in this.specificationList) {
                            if (obj.product_specification_id == this.specificationList[i].id) {
                                this.comments.push(obj)
                            }
                        }
                    }
                    return this.$API.getProductCommentPhotos()
                }
            }).then(res => {
                if (res.status == 200) {
                    for (let com of this.comments) {
                        let pic_list = []
                        for (let obj of res.data) {
                            if (obj.product_comment_id == com.id) pic_list.push(obj.photo_url)
                        }
                        this.$set(com, 'pic_list', pic_list)
                    }
                    return this.$API.getLoginAccount()
                }
            }).then(res => {
                if (res.status == 200) {
                    for (let com of this.comments) {
                        for (let obj of res.data) {
                            if (obj.id == com.account_id) this.$set(com, 'account', obj.account)
                        }
                    }
                }
            }).catch(error => {
                this.$message.error('数据加载异常')
            })
        }
    },
    created() {
        this.load()
    }
}
</script>


<style lang="less" scoped>
/deep/ .comment-list.el-card.is-always-shadow {
   border: none;
   box-shadow: none;
}
.comment-list {
    .header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 2rem;
        color: @color-theme;
        .el-rate {
            display: flex;
            align-items: center;
            height: 100%;
        }
        /deep/ .el-rate__icon, /deep/ .el-rate__text{
            font-size: 2rem;
        }
        /deep/ .el-rate__text {
            color: rgb(247, 186, 42) !important;
        }
    }
    .one-comment {
        margin-bottom: 20px;
        .one-comment-header {
            display: flex;
            justify-content: space-between;
            .pre {
                display: flex;
                align-items: center;
                .el-rate {
                    margin-left: 10px;
                    display: flex;
                    align-items: center;
                    height: 100%;
                }
                /deep/ .el-rate__icon {
                    margin: 0;
                }
            }
            .tips {
                color: @color-tips;
            }
        }
        .content {
            .text {
                line-height: 1.5rem;
            }
            .images {
                margin-top: 10px;
                img {
                    height: 100px;
                }
            }
        }
    }
}
</style>